<template>
  <el-dialog
    :visible.sync="showUnbinding"
    :close-on-click-modal="modalDialog"
    top="20vh !important"
    :close-on-press-escape="modalDialog"
    width="900px"
  >
    <div slot="title">
      <span>解绑</span>
      <span class="primaryColor ml10 underline pointer" @click="releRecord">关联记录</span>
    </div>
    <div class="df_ac">
      <div>
        <span class="key">手环信息：</span>
        <span class="value">{{ param.braceletId }}</span>
      </div>
      <div>
        <span class="key">票据名称：</span>
        <span class="value">{{ param.name || param.billName || '' }}</span>
      </div>
      <div>
        <span class="key">{{ param.userType === '0' ?'会员姓名：': '散客姓名：' }}</span>
        <span class="value">{{ param.userName }}</span>
      </div>
      <div>
        <span class="key">{{ param.userType === '0' ?'会员手机号：': '散客手机号：' }}</span>
        <span class="value">{{ param.phone || '-' }}</span>
      </div>
      <div v-if="param.number">
        <span class="key">会员卡号：</span>
        <span class="value">{{ param.number || '-' }}</span>
      </div>
      <div>
        <span class="key">手环押金：</span>
        <span class="value">{{ param.realDeposit }}</span>
      </div>
      <div>
        <span class="key">押金支付方式：</span>
        <span class="value">{{ param.payMethod }}</span>
      </div>
    </div>
    <div slot="footer" class="dialog-footer">
      <div class="gjCnt">
        <span>实退押金：</span>
        <el-input
          v-model="modPValue"
          maxlength="10"
          clearable
          oninput="value=value.replace(/[^0-9]{0,1}(\d*(?:\.\d{0,2})?).*$/g, '$1');"
          placeholder="请输入"
        />
      </div>
      <el-button @click="showUnbinding = false">取消</el-button>
      <el-button v-preventReClick :loading="subLoading" type="primary" @click="onSubmit">确定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { partialRefundBraceletOrder, printOrder } from '@/api'
import store from '@/store'
export default {
  data() {
    return {
      modalDialog: store.getters.dialog,
      editPd: false,
      showUnbinding: false,
      subLoading: false,
      param: {},
      modPValue: ''
    }
  },
  methods: {
    show(e) {
      this.showUnbinding = true
      this.param = e || {}
      this.modPValue = e.realDeposit || '0'
    },
    releRecord() {
      this.showUnbinding = false
      this.$router.replace(`/vipList/associationList`)
    },
    print(workId) {
      printOrder({
        param: {
          contentMap: {},
          venueId: sessionStorage.getItem('venueId'),
          workId,
          templateCode: 'BRACELET_REFUND_TPML'
        }
      })
        .then((res) => {
          console.log(res)
        })
        .catch((err) => {
          console.log(err)
        })
    },
    onSubmit() {
      const that = this
      const param = that.param
      if (!this.modPValue || (this.modPValue === '0' && Number(param.realDeposit) > 0)) {
        return this.$message.info('请输入实退押金')
      } else {
        if (this.modPValue > param.realDeposit) {
          return this.$message.info('实退押金不能大于手环押金')
        }
      }
      this.subLoading = true
      partialRefundBraceletOrder({ param: { id: param.id, money: Number(this.modPValue) }}).then(res => {
        this.subLoading = false
        if (res.errorCode !== '000000') return
        this.$message.success('解绑成功')
        this.showUnbinding = false
        if (res.record) {
          this.print(res.record)
        }
        this.$emit('success')
      }, () => {
        this.subLoading = false
      })
    }
  }
}
</script>
<style lang="scss" scoped>
@import '@/styles/variables.scss';
.df_ac {
  flex-wrap: wrap;
  border-bottom: 1px solid #DFE2E8;
  div {
    margin-bottom: 20px;
    width: 100%;
    .key {
  color: #666666;
  display: inline-block;
  width: 7em;
  text-align: right;
}
.value {
  color: #222;
}
  }
}
::v-deep .el-dialog__body {
  padding-bottom: 10px !important;
}
.gjCnt {
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #222222;
      line-height: 14px;
      float: left;
      span {
        width: 7em;
  text-align: right;
      }

      .el-input {
        width: 150px;
        margin: 0 5px;
      }
    }
</style>
